<template>
    <q-toolbar class="min-h-[44px] flex-center q-gutter-x-sm">
        <slot />
        <template v-if="list">
            <q-toggle v-model="list.a.编辑否" checked-icon="edit" color="green" unchecked-icon="edit_off" />
            <template v-if="详情_抽屉式">
                <q-btn push text-color="primary" label="新增" icon="add" @click="详情_抽屉式.初始化()" />
            </template>
            <template v-else>
                <q-btn push text-color="primary" label="新增" icon="add" @click="list.增()" />
            </template>
            <template v-if="路由.a.页面类型 == '列表'">
                <q-btn push text-color="negative" label="删除" icon="delete" @click="list.删()"
                    :disabled="!list.a.选中组.length" />
            </template>
            <!-- 在位编辑模式 -->
            <template v-if="!详情_抽屉式">
                <q-btn push text-color="primary" label="保存" @click="list.保存" v-if="list.a.变化了">
                    <q-badge color="orange" floating v-if="list.a.变化了">变</q-badge>
                </q-btn>
            </template>
            <q-input outlined dense v-model="list.req.多字段搜索关键词" placeholder="关键词……" debounce="800" clearable>
                <template v-slot:append>
                    <q-icon name="search" />
                </template>
            </q-input>
            <q-btn-dropdown push label="筛选" icon="filter_alt">
                <q-list class="min-w-80 q-pa-sm">
                    <q-toolbar class="min-h-40px flex-center q-gutter-x-sm">
                        <q-btn dense text-color="primary" label="新增" icon="add" @click="list.增筛选()" />
                        <q-btn dense text-color="primary" label="应用" icon="done" @click="list.保存筛选()" />
                        <q-btn dense text-color="negative" label="清除" icon="clear" @click="list.删筛选()" />
                    </q-toolbar>
                    <q-separator spaced />
                    <q-item clickable v-for="(item) in 筛选.筛选组">
                        <q-item-section>
                            <q-select outlined dense v-model="item.字段名" :options="list.筛选设置.字段名" label="字段名" />
                        </q-item-section>
                        <q-item-section>
                            <q-select outlined dense v-model="item.比较运算符" :options="list.筛选设置.比较运算符" label="比较符号" />
                        </q-item-section>
                        <q-item-section>
                            <q-input outlined dense v-model="item.字段值" placeholder="关键词……">
                            </q-input>
                        </q-item-section>
                    </q-item>
                </q-list>
            </q-btn-dropdown>
            <q-btn push text-color="primary" :label="路由.a.待切换页面类型" icon="content_paste" @click="list.视图切换()"
                v-if="插组件.组件.有看板否" />
            <el-dropdown>
                <span class="el-more-filled">其他
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="excel.导出excel" icon="download">
                            导出
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-upload action="#" :on-change="excel.导入excel" :multiple="false" accept=".xlsx,.xls"
                                :auto-upload="false">
                                <q-btn flat label="导入" icon="upload" />
                            </el-upload>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>

        <template v-if="详情_抽屉式 && !list">
            <q-btn push text-color="primary" label="保存" icon="check" @click="详情_抽屉式.保存" v-if="详情_抽屉式.a.变化了">
                <q-badge color="orange" floating v-if="详情_抽屉式.a.变化了">变</q-badge>
            </q-btn>
            <q-btn push label="关闭" icon="close" @click="详情_抽屉式.关窗" />
        </template>

        <!-- 独立的详情页面 -->
        <template v-if="详情">
            <q-btn push text-color="primary" label="保存" icon="check" @click="详情.保存" v-if="详情.a.变化了">
                <q-badge color="orange" floating v-if="详情.a.变化了">变</q-badge>
            </q-btn>
            <q-btn push text-color="primary" label="复制" icon="file_copy" @click="详情.复制" />

            <q-btn push text-color="negative" label="删除" icon="delete" @click="详情.删" v-if="详情.单项.id" />
        </template>

        <template v-if="设置">
            <q-btn push text-color="primary" label="新增" icon="add" @click="设置.增" />
            <q-btn push text-color="primary" label="保存" @click="设置.保存" v-if="设置.a.变化了">
                <q-badge color="orange" floating v-if="设置.a.变化了">变</q-badge>
            </q-btn>
        </template>
        <slot name="尾部" />
    </q-toolbar>
</template>

<script setup lang="ts">
import use路由 from '@/hooks/use路由';
const 路由 = use路由();

import use插组件 from '@/hooks/use插组件';
const 插组件 = use插组件();

// const props = defineProps({
//     // 可选属性: { type: Array, default: [] }
//     详情: Object,
//     详情_抽屉式: Object,
//     设置: Object,
//     list: Object,
// })
const props = withDefaults(defineProps<{
    详情?: Object,
    详情_抽屉式?: Object,
    设置?: Object,
    list?: list,
}>(),
    {
    });

import useexcel from '@/hooks/useexcel';
import use筛选 from '@/hooks/use筛选';
let excel = {}
let 筛选 = {}

if (props.list) {
    const { 单项组, 插组件 } = props.list
    excel = useexcel({ 单项组, 插组件 })
    筛选 = use筛选({ 单项组, 插组件, 接收者: props.list.req })
}

</script>

<style lang="scss" scoped></style>